<template>
  <div class="page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h4>单项重点工作目标任务进度分析</h4>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div>
            <div class="selectData">
              <span style="font-size:14px;margin-right: 6px;">季度:</span>
              <el-select
                v-model="quarter"
                style="width:100px;"
                size="small"
                clearable
                placeholder="请选择季度"
                @change="getUpdate()"
              >
                <el-option
                  v-for="item in quarterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <span style="margin-left:20px;margin-right:6px;font-size:14px;"
                >重点工作:</span
              >
              <el-cascader
                ref="taskRef"
                style="width:150px;"
                v-model="taskId"
                :options="taskLists"
                :props="taskProp"
                size="small"
                :show-all-levels="false"
                @change="getTaskId"
              ></el-cascader>
              <span style="margin-left:20px;margin-right:6px;font-size:14px;"
                >亮灯选择:</span
              >
              <el-select v-model="lamp" placeholder="请选择"  size="small"
                clearable style="width:100px;"  @change="getTaskId">
                <el-option
                  v-for="item in Lightsto"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="tableStyle">
              <div id="YmyChartSpeed"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="table">
            <el-table
              border
              :data="tableData"
              style="width: 100%;height:100%;overflow-y:auto;"
              :header-row-style="headerdataStyle"
              height="600"
            >
              <el-table-column label="指标说明列表">
                <el-table-column prop="indexName" width="100"></el-table-column>
                <el-table-column prop="targetName" label></el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import logInfoVue from "../../systemAdm/logInfo.vue";

export default {
  data() {
    return {
      quarter: 1,
      taskId: [],
      taskProp: {
        label: "name",
        value: "id",
        children: "children"
      },
      taskLists: [],
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      Lightsto: [
        { id: 2, name: "红灯" },
        { id: 1, name: "黄灯" },
        { id: 0, name: "绿灯" }
      ],
      lamp:0,
      tableData: []
    };
  },
  mounted() {
    this.getTaskList();
  },
  methods: {
    // 获取数据
    getNumber() {
      let _val = JSON.parse(JSON.stringify(this.taskId));
      if (!Array.isArray(_val)) {
        _val = [_val];
      }
      _val = _val[_val.length - 1];
      console.log(_val, 888);
      this.$axios
        .post(`/distribution/getTaskTargetFinishRate`, {
          taskId: _val,
          quarter: this.quarter,
          lamp:this.lamp
        })
        .then(res => {
          console.log(res);
          if (res.code == 200) {
            let _data = res.data;
            if (_data.length != 0) {
              let xName = [];
              let Ydata1 = [];
              let Ydata2 = [];
              console.log(_data);
              this.tableData = _data;
              _data.forEach((item, index) => {
                xName.push(item.indexName);
                Ydata1.push(+item.quarterFinishRate * 100);
                Ydata2.push(+item.yearFinishRate * 100);
              });
              this.dataAnalysis(xName, Ydata1, Ydata2);
            } else {
              let xName = [];
              let Ydata1 = [];
              let Ydata2 = [];
              this.tableData = [];
              this.dataAnalysis(xName, Ydata1, Ydata2);
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getUpdate() {
      this.getNumber();
      console.log("1");
    },
    // 时刻获取十项重点工作
    getTaskId(val) {
       this.getNumber();
    },
    // 获取十项重点工作
    getTaskList() {
      this.$axios
        .post("/task/getList")
        .then(res => {
          console.log(res.data, "res.data");
          let arr = res.data;
          if (arr[0].children.length == 0) {
            this.taskId = arr[0].id;
          } else {
            this.taskId = arr[0].children[0].id;
          }
          arr.forEach(item => {
            if (item.children.length == 0) {
              item.children = undefined;
            }
          });
          this.taskLists = arr;
          this.getNumber();
        })
        .catch(err => {});
    },
    dataAnalysis(xName, Ydata1, Ydata2) {
      var YmyChartSpeed = this.$echarts.init(
        document.getElementById("YmyChartSpeed")
      );
      YmyChartSpeed.setOption({
        color: ["#9560e4", "#f2637b"],
        title: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["季度完成率", "年度完成率"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0],
          axisLabel: {
            formatter: "{value}%"
          }
        },
        yAxis: {
          type: "category",
          data: xName
        },
        series: [
          {
            name: "季度完成率",
            type: "bar",
            data: Ydata1,
            barGap: "0%",
            barWidth: 20
          },
          {
            name: "年度完成率",
            type: "bar",
            data: Ydata2,
            barWidth: 15
          }
        ]
      });
    },
    headerdataStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 1) {
        return { display: "none" };
      }
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > div {
    width: 100%;
    height: 900px;
    margin-bottom: 20px;
  }
}
.tableStyle {
  width: 100%;
  height: auto;
  padding-top: 40px;
  > div {
    width: 100%;
    height: 700px;
    margin-bottom: 20px;
  }
}
.userIntSize {
  width: 30% !important;
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
.table {
  padding-top: 130px;
  width: 80%;
  margin: auto;
  height: 800px;
  overflow-y: auto;
}
</style>
